<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>5分钟学会 CSS Grid 布局</title>
	<style type="text/css">
		.wrapper{
			text-align: center;
			line-height: 100px;
			font-weight: bold;
			color: #fff;
			display: grid;
			grid-template-columns:100px 100px 100px;
			grid-template-rows:100px 100px 100px;
		}
		
		.item1{
			grid-column-start:1;
			grid-column-end:4;
			background-color: #acf4b6;
		}
		.item2{
			grid-column: 1 / 4 ;
			background-color: #ffe975;
		}
		.item3{
			grid-column-start:1;
			grid-column-end:3;
			background-color: #5efffa;
		}
		.item4{
			background-color: #e6b4fd;
		}
		.item5{
			grid-column-start:1;
			grid-column-end: 2;
			background-color: #8dfecd;
		}
		.item6{
			grid-column-start:2;
			grid-column-end: 4;
			background-color: #fd9a5c;
		}
		.item7{
			background-color: #122B40;
		}
		.item8{
			background-color: #761C19;
		}
		.item9{
			background-color: #FE0225;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="item1">1</div>
		<div class="item2">2</div>
		<div class="item3">3</div>
		<div class="item4">4</div>
		<div class="item5">5</div>
		<div class="item6">6</div>
		<div class="item7">7</div>
		<div class="item8">8</div>
		<div class="item9">9</div>
	</div>
</body>
</html>